<template>
  <div class="screen-area">
    <div class="screen-area-item"
         v-for="(item, index) in menus" :key="item.value"
         :class="{actived: item.value === activeKey}"
         @click="onItemClick(item)">
      {{item.label}}
    </div>

  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    activeKey: String
  },
  data() {
    return {
      menus: [
        {label: '全区', value: 'all'},
        {label: '华苑', value: 'huayuan'},
        {label: '渤龙湖', value: 'bolonghu'},
        {label: '海洋科技园', value: 'haiyang'}
      ]
    }
  },
  methods: {
    onItemClick(item) {
      if(this.activeKey === item.value) {
        return
      }
      this.$emit('update:activeKey', item.value)
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.screen-area {
  color: #FFF;
  z-index: 3;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 115px;

  &-item {
    display: inline-block;
    height: 40px;
    padding: 0 18px;
    background-image: url("~@/assets/screen/btn-bg.svg");
    background-size: 100% 100%;
    line-height: 40px;
    cursor: pointer;

    &:hover, &.actived {
      color: #90F1F7;
      outline: #90F1F7 solid 1px;
      border-radius: 3px;
    }

    & + .screen-area-item {
      margin-left: 7px;
    }


  }
}
</style>
